<template>
	<div class="system-{{table_info.camelName}}-container">
		<el-card shadow="hover">
			<div class="system-{{table_info.camelName}}-search mb15">
        <el-form :inline="true">
        {% for item in front_info.serach_columns %}
            <el-form-item label="{{item.comment}}">
             <el-input size="default" v-model="state.tableData.param.{{item.camelName}}" style="width: 240px" placeholder="请输入{{item.comment}}" class="w-50 m-2" clearable/>
            </el-form-item>
        {% endfor %}
          <el-form-item>
            <el-button size="default" type="primary" class="ml10" @click="{{table_info.camelName}}List">
              <el-icon>
                <ele-Search />
              </el-icon>
              查询
            </el-button>
            <el-button size="default" type="success" class="ml10" @click="onOpenAdd{{table_info.firstUpperName}}">
              <el-icon>
                <ele-FolderAdd />
              </el-icon>
              新增{{table_info.comment}}
            </el-button>
            <el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
              <el-icon>
                <ele-Delete />
              </el-icon>
              删除{{table_info.comment}}
            </el-button>
          </el-form-item>
        </el-form>
			</div>
			<el-table :data="state.tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column type="index" label="序号" width="60" />
                {% for item in field_info %}
                {% if item.camelName not in ['id', 'createdBy','updatedBy','createdAt','updatedAt'] %}
                <el-table-column prop="{{item.camelName}}" label="{{item.comment}}" show-overflow-tooltip></el-table-column>
                {% endif %}
                {% endfor %}
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenEdit{{table_info.firstUpperName}}(scope.row)">修改</el-button>
                        <el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
      <pagination
          v-show="state.tableData.total>0"
          :total="state.tableData.total"
          v-model:page="state.tableData.param.pageNum"
          v-model:limit="state.tableData.param.pageSize"
          @pagination="{{table_info.camelName}}List"
      />
		</el-card>
		<Edit{{table_info.firstUpperName}} ref="edit{{table_info.firstUpperName}}Ref" @get{{table_info.firstUpperName}}List="{{table_info.camelName}}List"/>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import Edit{{table_info.firstUpperName}} from '/@/views/{{package_info.package}}/{{table_info.camelName}}/component/edit{{table_info.firstUpperName}}.vue';
import { batchDelete{{table_info.firstUpperName}}, get{{table_info.firstUpperName}}List } from "/@/api/{{package_info.package}}/{{table_info.camelName}}";

// 定义接口来定义对象的类型
interface TableData {
  {% for item in field_info %}
  {{ item.camelName }}: {{ item.tsType }}; // {{ item.comment }}
  {% endfor %}
}

interface TableDataState {
    ids: number[];
    tableData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        param: {
            {% for item in front_info.serach_columns %}
            {{ item.camelName }}: {{ item.type }}; // {{ item.comment }}
            {% endfor %}
            pageNum: number; // 当前页码
            pageSize: number; // 每页条数
        };
    };
}

const edit{{table_info.firstUpperName}}Ref = ref();
const state = reactive<TableDataState>({
    ids: [],
    tableData: {
        data: [],
        total: 0,
        loading: false,
        param: {
            {% for item in front_info.serach_columns %}
            {% if item.type == 'string' %}
            {{ item.camelName }}: '',
            {% else %}
            {{ item.camelName }}: 0,
            {% endif %}
            {% endfor %}
            pageNum: 1,
            pageSize: 10,
        },
    },
});

// 初始化表格数据
const initTableData = () => {
    {{ table_info.camelName }}List();
};

// 查询{{ table_info.comment }}列表数据
const {{ table_info.camelName }}List = () => {
    get{{ table_info.firstUpperName }}List(state.tableData.param).then(res => {
        state.tableData.data = res.data.{{ table_info.camelName }}List ?? [];
        state.tableData.total = res.data.total;
    });
};

// 打开新增{{ table_info.comment }}弹窗
const onOpenAdd{{ table_info.firstUpperName }} = () => {
    edit{{ table_info.firstUpperName }}Ref.value.openDialog();
};

// 打开修改{{ table_info.comment }}弹窗
const onOpenEdit{{ table_info.firstUpperName }} = (row: Object) => {
    row = Object.assign({}, row);
    edit{{ table_info.firstUpperName }}Ref.value.openDialog(row);
};

// 删除{{ table_info.comment }}
const onRowDel = (row: any) => {
    let msg = '你确定要删除所选{{ table_info.comment }}？';
    let ids: number[] = [];
    if (row) {
        msg = `此操作将永久删除{{ table_info.comment }}：“${row.{{ front_info.primarkName }}}”，是否继续?`;
        ids = [row.id];
    } else {
        ids = state.ids;
    }
    if (ids.length === 0) {
        ElMessage.error('请选择要删除的数据。');
        return;
    }
    ElMessageBox.confirm(msg, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        batchDelete{{ table_info.firstUpperName }}(ids).then(() => {
            ElMessage.success('删除成功');
            {{ table_info.camelName }}List();
        });
    }).catch(() => {});
};

// 分页改变
const onHandleSizeChange = (val: number) => {
    state.tableData.param.pageSize = val;
    {{ table_info.camelName }}List();
};

// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.tableData.param.pageNum = val;
    {{ table_info.camelName }}List();
};

// 多选框选中数据
const handleSelectionChange = (selection: Array<TableData>) => {
    state.ids = selection.map(item => item.id);
};

// 页面加载时
onMounted(() => {
    initTableData();
});
</script>